<template>
  <div>
    <el-card class="searchLine">
      <el-form :inline="true" :model="shopForm" style="margin-top:10px">
        <el-form-item label="商品编码：">
          <el-input v-model="shopForm.code" placeholder="请输入商品编码" clearable />
        </el-form-item>
        <el-form-item label="商品名称：">
          <el-input v-model="shopForm.name" placeholder="请输入商品名称" clearable />
        </el-form-item>
        <el-form-item label="商品品牌：">
          <el-input v-model="shopForm.brand" placeholder="请输入商品品牌" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">
            查询
          </el-button>
          <el-button @click="onClear">
            清空
          </el-button>
          <el-button type="primary" icon="el-icon-plus" @click="addShop" />
        </el-form-item>
      </el-form>
    </el-card>

    <el-card>
      <el-table
        :data="tableData"
        border
        style="width: 100%;"
        stripe
      >
        <el-table-column
          fixed
          prop="code"
          label="商品编码"
          width="150"
        />
        <el-table-column
          prop="brand"
          label="品牌"
          width="120"
        />
        <el-table-column
          prop="name"
          label="商品名称"
          width="120"
        />
        <el-table-column
          prop="detail"
          label="商品详情"
        />
        <el-table-column
          prop="url"
          label="跳转地址"
          width="220"
        />
        <el-table-column
          prop="imgUrl"
          label="图片地址"
          width="220"
        />
        <el-table-column
          prop="creator"
          label="操作人"
          width="120"
        />
        <el-table-column
          fixed="right"
          label="操作"
          width="100"
        >
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleEdit(scope.row)">
              编辑
            </el-button>
            <el-button type="text" size="small" @click="handleDelete(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="sizes,prev, pager, next"
        :total="pager.total"
        :current-page="pager.pageNum"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="pager.pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <el-dialog :title="subType? '新增商品':'编辑商品'" :visible.sync="dialogFormVisible" :show-close="false"
               :close-on-click-modal="false"
    >
      <el-form ref="ruleForm" :model="addForm" label-width="120px"
               :rules="rules"
      >
        <el-form-item label="商品编码" prop="code">
          <el-input v-model="addForm.code" autocomplete="off" />
        </el-form-item>
        <el-form-item label="商品名称" prop="name">
          <el-input v-model="addForm.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="品牌" prop="brand">
          <el-input v-model="addForm.brand" autocomplete="off" />
        </el-form-item>
        <el-form-item label="商品详情" prop="detail">
          <el-input v-model="addForm.detail" autocomplete="off" />
        </el-form-item>
        <el-form-item label="商品Url" prop="url">
          <el-input v-model="addForm.url" autocomplete="off" />
        </el-form-item>
        <el-form-item label="图片地址" prop="imgUrl">
          <el-input v-model="addForm.imgUrl" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('ruleForm')">
          取 消
        </el-button>
        <el-button type="primary" @click="submitAddForm('ruleForm')">
          确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getShopList, addShop, deleteShop, editShop} from '@/api/link/index'
export default {
  data() {
    return {
      subType: true, // true表示add,false表示edit
      shopForm: {
        name: '',
        code: '',
        brand: '',
        creator: window.localStorage.getItem('username')
      },
      pager: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      tableData: [],
      dialogFormVisible: false,
      addForm: {
        name: '',
        code: '',
        brand: '',
        url: '',
        detail: '',
        imgUrl: '',
        creator: window.localStorage.getItem('username')
      },
      rules: {
        name: [
          { required: true, message: '请输入商品名称', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入商品编码', trigger: 'blur' }
        ],
        brand: [
          { required: true, message: '请输入品牌', trigger: 'blur' }
        ],
        url: [
          { required: true, message: '请输入商品地址', trigger: 'blur' }
        ],
        detail: [
          { required: true, message: '请输入商品详情', trigger: 'blur' }
        ],
        imgUrl: [
          { required: true, message: '请输入图片地址', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.onLoad()
  },
  methods: {
    onSubmit() {
      this.onLoad()
    },
    onClear() {
      this.shopForm = {
        name: '',
        code: '',
        brand: '',
        creator: window.localStorage.getItem('username')
      }
      this.onLoad()
    },
    onLoad() {
      getShopList({
        ...this.shopForm,
        pageNum: this.pager.pageNum,
        pageSize: this.pager.pageSize
      }).then(res => {
        let {list, total} = res.data
        this.tableData = list
        this.pager.total = total
      })
    },
    handleSizeChange(val) {
      this.pager.pageSize = val
      this.onLoad()
    },
    handleCurrentChange(val) {
      this.pager.pageNum = val
      this.onLoad()
    },
    addShop() {
      this.dialogFormVisible = true
      this.subType = true
    },
    submitAddForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.subType) {
            addShop(this.addForm).then(res => {
              console.log('新增addform', res)
              this.dialogFormVisible = false
              this.onLoad()
              this.resetForm('ruleForm')
            })
          } else {
            editShop(this.addForm).then(res => {
              console.log('编辑addform', res)
              this.dialogFormVisible = false
              this.onLoad()
              this.resetForm('ruleForm')
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.addForm = {
        name: '',
        code: '',
        brand: '',
        url: '',
        detail: '',
        imgUrl: '',
        creator: window.localStorage.getItem('username')
      }
      this.dialogFormVisible = false
    },
    handleDelete(row) {
      let params = {id: row.id}
      deleteShop(params).then(res => {
        if (res.code === 10000) {
          this.$message.success('删除成功')
          this.onLoad()
        } else {
          this.$message.error('删除失败')
        }
      })
    },
    handleEdit(row) {
      this.subType = false
      console.log(row)
      this.dialogFormVisible = true
      this.addForm = row
    }
  }
}
</script>

<style lang="less" scoped>
.searchLine{
margin-bottom: 10px;
}
</style>
